<template>
  <nav class="nav">
    {{ inputValue }}
    <input type="text" v-model="value" name="" id="" />
    <button @click="handleSearchClick">搜索</button>
  </nav>
</template>

<script>
// 如果大家碰到了v-model的子和父的抽离，一般要将子组件内部的v-model的逻辑在子组件内部处理，
// 并且将结果给父组件，
// ⭐️（如果碰到子组件内部有v-model,不要直接传递值，而是在内部处理逻辑，然后传出结果就可以了）
export default {
  // props: {
  //   inputValue: {
  //     type: String,
  //   },
  // },
  data() {
    return {
      value: '',
    }
  },
  watch: {
    value(v) {
      if (!v) {
        // 告诉父组件，你去重新请求数据吧
        this.$emit('watchClick')
      }
    },
  },
  methods: {
    handleSearchClick() {
      // 告诉父组件一个搜索结果，你可以根据这个value来搜索列表了
      this.$emit('searchClick', this.value)
    },
  },
}
</script>

<style></style>
